<template>
  <div>
    <Search
      :loading="queryloading"
      @search="
        querylist.pagenum = 1;
        getusers();
      "
      @click="
        form = {};
        $refs.d.show();
      "
      v-model="querylist.query"
    >
      添加用户
    </Search>

    <!-- 搜索区 -->

    <!-- 表格 -->

    <MyTable
      :loading="tableloading"
      :data="list"
      :cols="cols"
      :total="total"
      v-model="querylist"
      @change="getusers"
    >
      <template v-slot:state="{ row }">
        <el-switch
          v-model="row.mg_state"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="switchange(row)"
        >
        </el-switch>
      </template>
      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="
            form = { ...row };
            $refs.d.show();
          "
        ></el-button>

        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="deleteUsers(row)"
          circle
        ></el-button>
        <el-button
          type="warning"
          icon="el-icon-star-off"
          circle
          @click="
            form = { ...row };
            getroleslist();
          "
        >
        </el-button>
      </template>
    </MyTable>
    <!-- 弹出修改删除模态框 -->
    <DF
      ref="d"
      :title="this.title + '用户'"
      v-model="form"
      :opts="opts"
      @confirm="confirm"
    ></DF>
    <!-- <Dialog :title="this.title + '用户'" ref="d" @confirm="confirm()">
      <Myform ref="forms" v-model="form" :opts="opts"></Myform>
    </Dialog> -->

    <Dialog title="分配角色" ref="ad" @confirm="enitroles()">
      <p>当前用户:{{ form.username }}</p>
      <p>当前角色:{{ form.role_name }}</p>
      分配新角色:
      <p>
        <el-select v-model="form.rid">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </p>
    </Dialog>
  </div>
</template>

<script>
import {
  GetUser,
  changestate,
  adduser,
  edituser,
  deleteuser,
} from "../api/user.js";
import { getRoles, updateroles } from "../api/roles.js";
import { pageMixins } from "@/mixin/baseMixin";

export default {
  mixins: [pageMixins],

  name: "user",
  data() {
    return {
      /**
       * 表单
       */

      /**
       * 总页数
       */
      total: 0,
      /**
       * 加载
       */
      queryloading: false,
      /**
       * 校验规则
       */
      // rules: {
      //   username: [
      //     { required: true, message: "请输入用户", trigger: "blur" },
      //     {
      //       min: 3,
      //       max: 10,
      //       message: "长度在 3 到 10 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      //   password: [
      //     { required: true, message: "请输入密码", trigger: "blur" },
      //     {
      //       min: 3,
      //       max: 16,
      //       message: "长度在 3 到 16 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      //   email: [
      //     { required: true, message: "请输入邮箱", trigger: "blur" },
      //     { type: "email", message: "请输入正确邮箱", trigger: "blur" },
      //   ],
      //   mobile: [
      //     { required: true, message: "请输入手机号", trigger: "blur" },
      //     {
      //       pattern: /^1[3-9]\d{9}$/,
      //       message: "长度在 3 到 11 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      // },

      /**
       * 模态框的数据
       */
      form: {},

      /**
       * 角色列表
       */
      roles: [],

      tableloading: false,
      /**
       * 列
       */
      cols: [
        { title: "#", type: "index" },
        { title: "姓名", name: "username" },
        { title: "邮箱", name: "email" },
        { title: "电话", name: "mobile" },
        { title: "角色", name: "role_name" },
        { title: "状态", slot: "state" },
        { title: "操作", slot: "action" },
        //  {align: "center", width: 270 },
      ],
    };
  },

  mounted() {},
  methods: {
    /**
     * 获取分配角色信息
     */
    async getroleslist() {
      try {
        this.roles = await getRoles();
        const rid =
          this.roles.find((c) => c.roleName === this.form.role_name)?.id ??
          this.roles[0].id;
        this.$set(this.form, "rid", rid);
        this.$refs.ad.show();
        this.tableloading = true;
      } catch (error) {}
      this.tableloading = false;
    },
    /**
     * 修改角色
     */
    async enitroles() {
      const ad = this.$refs.ad;
      try {
        ad.start();

        await updateroles(this.form.id, this.form.rid);
        this.$m.success("角色修改成功");
        ad.hide();

        this.getusers();
      } catch (error) {
        console.log(error);
      }
      ad.stop();
    },
    /**
     * 获取信息
     */
    async getusers() {
      try {
        this.queryloading = true;
        const { total, users } = await GetUser(this.querylist);
        this.total = total;
        this.list = users;
      } catch (error) {
        console.log(error);
      }

      this.queryloading = false;
    },
    /**
     * 更改状态
     */

    async switchange({ id, mg_state }) {
      try {
        await changestate(id, mg_state);
        this.$m.success("更改状态成功");
        this.getusers();
      } catch (error) {}
    },
    /**
     * 提交添加修改
     */
    async confirm() {
      //  console.log(this.form);
      const d = this.$refs.d;
      try {
        // await this.$refs.forms.validate();
        d.start();
        await (this.form.id ? edituser : adduser)(this.form);

        d.hide();
        this.$m.success(this.title + "成功");

        this.getusers();
      } catch (error) {}
      d.stop();
    },
    /**
     * 删除
     */
    async deleteUsers({ id, username }) {
      let res;
      try {
        res = await this.$myConfirm(`确定要删除【${username}】吗`);
        console.log(res);
        await deleteuser(id);
        this.$m.success("删除成功");
        this.getusers();
      } catch (error) {}
      res && res();
    },
  },
  created() {
    this.getusers();
    this.test;
  },
  computed: {
    title() {
      return this.form.id ? "修改" : "添加";
    },
    opts() {
      return {
        username: {
          title: "用户名",
          dis: !!this.form.id,
          required: true,
          ph: "请输入用户名",
          rules: [{ min: 5, max: 10 }],
        },
        password: {
          title: "密码",
          required: true,
          type: "password",
          dis:!!this.form.id,
          ph: "请输入密码",
          rules: [{ min: 6, max: 16 }],
        },

        email: {
          title: "邮箱",
          required: true,
          ph: "请输入邮箱",
          rules: [{ type: "email" }],
        },
        model: {
          title: "手机号",
          required: true,
          ph: "请输入手机号",
          rules: [{ pattern: /^1[3-9]\d{9}$/ }],
        },
      };
    },
  },
};
</script>
<style scoped lang="scss">
.caozuo {
  display: flex;
}
</style>
